<template>
<view class="container">
 <view class="nav">
        <navigator :class="'nav-item ' + (idx == 1 ? 'red' : '')" @tap="changeTab" data-type="1">默认</navigator>
        <navigator :class="'nav-item ' + (idx == 2 ? 'red' : '')" @tap="changeTab" data-type="2">即将过期</navigator>
        <navigator :class="'nav-item ' + (idx == 3 ? 'red' : '')" @tap="changeTab" data-type="3">面值最大</navigator>
        <navigator class="nav-item search" @tap.stop="listShow" :hidden="!listType"><image class="wh100 search-img" src="/static/images/goodslistshow1.png"></image></navigator>
    </view>
   <!-- 商品详情领券入口 -->

    <view v-for="(item, index) in coupons" :key="index" class="coupon_list" :data-index="index">
      <image class="coupon_bg" src="/static/images/coupon_bg.png"></image>
      <image v-if="item.isget == 1" class="coupon_already" src="/static/images/already.png"></image>
      <view class="main_box">
        <image class="coupon_mode" :src="item.coupon_img?item.coupon_img:'../../../images/coupon_mode.jpg'"></image>
        <view class="right_main">
          <view class="topbox">{{item.use_type_title}}</view>
          <view class="footbox">
            <view class="leftbox">
              <view class="price">
                ￥<text class="note">{{item.money}}</text>       
              </view>
              <view class="full">
                满{{item.condition}}可用
              </view>
            </view>
            <view v-if="item.isget == 1" class="btn_2">已领取</view>
            <view v-else @tap="getCoupon" :data-cid="item.id" class="btn_1">立即领取</view>
          </view>
        </view>
      </view>
    </view>

   <!-- <block wx:if="{{type}}">
    <view class="coupon-box"  wx:for="{{coupons}}" wx:key="index">
        <view class="conpon-left">
            <image class="wh100 conpon-img" src="../../../images/coupon.png"></image>
            <view class="coupon-detail">
                <view class="coupon-title">【{{item.name}}】{{' '}}{{item.use_type_title}}</view>
                <view class="coupon-info">
                    <text class="discounts">{{item.money}} </text> 满{{item.condition}}元可用
                </view>
            </view>
        </view>
        <view class="conpon-right">
            <view class="get-btn" bindtap="getCoupons"  data-idx="{{index}}" data-cid="{{item.id}}">
                {{item.isget == 0 ? '点击领取':'已领取'}}
            </view>
        </view>
    </view>
    </block>
    <block wx:else>
    <!-- 领券中心入口 -->
        <!-- <view class="coupon-box"  wx:for="{{coupons}}" wx:key="index">
        <view class="conpon-left">
            <image class="wh100 conpon-img" src="../../../images/coupon.png"></image>
            <view class="coupon-detail">
                <view class="coupon-title">【{{item.name}}】{{' '}}{{item.use_scope}}</view>
                <view class="coupon-info">
                    <text class="discounts">{{item.money}} </text> 满{{item.condition}}元可用
                </view>
            </view>
        </view>
        <view class="conpon-right">
            <canvas class="circle" canvas-id="{{item.id}}"/>
            <view>已抢</view>
            <view>{{item.percent}}%</view>
            <view class="get-btn" bindtap="getCoupon"  data-idx="{{index}}" data-cid="{{item.id}}">
                {{item.createnum!=0&&item.send_num>=item.createnum ? '已抢完':'点击领取'}}
            </view>
        </view>
    </view>
    </block> -->


    <view class="no-data" v-if="coupons.length <=0">
        <image src="/static/images/cart-null.png" class="cart-image"></image>
        <view class="no-data-title">没有相关的数据</view>
        <navigator url="/pages/index/index/index" class="lookat"> 去逛逛 </navigator>
    </view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      coupons: null,
      typeId: 1,
      currentPage: 1,
      type: false,
      pages: null,
      idx: 1
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    //商品详情领券
    if (options && options.type == 'goodsinfo') {
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 2]; //上一个页面

      this.setData({
        coupons: prevPage.data.cardList,
        type: true,
        pages: prevPage
      });

      for (var i in this.coupons) {
        //价格切割
        var val = this.coupons[i];
        val.round = val.money.split(".")[0];
        val.point = val.money.split(".")[1];
        val.use_scope = val.use_type_title;
      }

      this.setData({
        coupons: this.coupons
      });
    } else {
      load.init(this, '', 'coupons');
      this.requestCouponList(this.typeId);
    }
  },
  onReachBottom: function () {
    if (load.canloadMore() && !this.type) {
      this.requestCouponList(this.typeId);
    }
  },
  onShow: function () {
    //领券中心    
    if (uni.getStorageSync('coupon_login')) {
      uni.removeStorageSync('coupon_login');
      this.reloadCouponList(this.typeId);
    }
  },
  onPullDownRefresh: function () {
    !this.type && this.reloadCouponList(this.typeId);
  },
  methods: {
    requestCouponList: function (typeId) {
      var that = this;
      that.setData({
        typeId: typeId
      });
      var requestUrl = '/api/activity/coupon_list?type=' + typeId + '&p=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++;

        if (res.data.result.length > 0) {
          for (var i in res.data.result) {
            var val = res.data.result[i];
            val.round = val.money.split(".")[0];
            val.point = val.money.split(".")[1];
            val.percent = val.createnum > 0 ? Math.ceil(val.send_num / val.createnum * 100) : 0;
          }

          uni.stopPullDownRefresh();
        }
      });
    },
    changeTab: function (e) {
      this.setData({
        idx: e.currentTarget.dataset.type
      });
      this.reloadCouponList(e.currentTarget.dataset.type);
    },
    //重置数据
    reloadCouponList: function (typeId) {
      load.resetConfig();
      this.coupons = null;
      this.currentPage = 1;
      this.requestCouponList(typeId);
    },

    /** 商品详情领券 */
    getCoupons: function (e) {
      var that = this;
      var coupon_id = e.currentTarget.dataset.cid;
      var idx = e.currentTarget.dataset.idx;
      var coupons = that.coupons; //检查用户是否登录方可操作立即购买

      if (!app.globalData.auth.isAuth()) {
        uni.setStorageSync('coupon_login', true);
        app.globalData.showLoading(null, 1500);
        app.globalData.getUserInfo();
        return;
      }

      request.post('/api/activity/get_coupon', {
        data: {
          coupon_id: coupon_id
        },
        success: function (res) {
          app.globalData.confirmBox(res.data.msg);
          coupons[idx]['isget'] = 1;
          that.setData({
            coupons: coupons
          });
          that.pages.data.cardList = coupons;
        }
      });
    },

    /** 领券 */
    getCoupon: function (e) {
      var that = this;
      var coupon_id = e.currentTarget.dataset.cid;
      var idx = e.currentTarget.dataset.idx;
      var coupons = that.coupons;
      var arr = [];
      var del_index; //检查用户是否登录方可操作立即购买

      if (!app.globalData.auth.isAuth()) {
        uni.setStorageSync('coupon_login', true);
        app.globalData.showLoading(null, 1500);
        app.globalData.getUserInfo();
        return;
      }

      for (var i in coupons) {
        if (coupons[i]['id'] != coupon_id) {
          arr.push(coupons[i]);
        } else {
          del_index = i;
        }
      }

      request.post('/api/activity/get_coupon', {
        data: {
          coupon_id: coupon_id
        },
        success: function (res) {
          app.globalData.confirmBox(res.data.msg);
          arr.splice(i, 1);
          that.setData({
            coupons: arr
          });
        }
      });
    },

    /** 获取所有优惠券领券进度 */
    getCouponRate: function (coupons) {
      for (var i in coupons) {
        var id = coupons[i].id;
        var rate = coupons[i].percent / 100;
        this.createCircle(id, rate);
      }
    },

    /** 画领取进度 */
    createCircle: function (id, rate) {
      var context = uni.createCanvasContext(id);
      context.beginPath();
      context.setStrokeStyle("#8e8e8e");
      context.setLineWidth(3);
      context.setLineCap('round');
      context.arc(38, 35, 31, 0.75 * Math.PI, 2.25 * Math.PI, false);
      context.stroke();

      if (rate > 0) {
        context.beginPath();
        context.setLineWidth(3);
        context.setStrokeStyle("#ffffff");
        context.setLineCap('round');
        context.arc(38, 35, 31, 0.75 * Math.PI, (rate * 1.5 + 0.75) * Math.PI, false);
        context.stroke();
      }

      context.draw();
    }
  }
};
</script>
<style>

.container {
    padding-bottom:10rpx;
    padding-top: 100rpx;
}
.red{
    color: #ff6a00;
    font-weight: bold;
}
.coupon-box{
    font-size: 26rpx;
    padding: 0 30rpx;
    margin: 15rpx 0;
    background-color: #fff;
    margin: 14rpx;
}
.conpon-left{
    float:left;
    padding: 30rpx 0 30rpx 10rpx;
}
.conpon-img{
    box-sizing: border-box;
    float:left;
    height: 150rpx;
    width: 150rpx;
    border: 1rpx solid #f3f3f3;
}
.coupon-detail{
    float:left;
    padding: 10rpx 10rpx;
}
.coupon-title{
    width: 300rpx;
    height: 62rpx;
    overflow: hidden;
}
.coupon-info{
    color: #4cb6b8;
    margin-top: 25rpx;
    width:300rpx;
}
.discounts{
    font-size: 40rpx;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
}
.conpon-right{
    position: relative;
    float:right;
    width: 160rpx;
    height: 160rpx;
    padding-top:50rpx;
    background-color: #74d2d4;
    text-align: center;
    color: #f6f6f6;
    border-top-right-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
}
.circle{
    position:absolute;
    top:15rpx;
    left:12rpx;
    width:140rpx;
    height:120rpx;
    text-align:left;
}
.get-btn{
    background: white;
    color: #74d2d4;
    border-radius: 26rpx;
    width: fit-content;
    padding: 0 8rpx;
    border: 4rpx solid #48b3b5;
    margin: 40rpx auto 0;
}

.red{
    color: #ff6a00;
}
.nav{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
.nav-item{
    float: left;
    width: 33.3%;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    border-bottom: 1px solid #f3f3f3;
    background-color: #fff;

}
.nav-item .ico-dg{
    width: 18rpx;
    height: 12rpx;
    margin-left: 10rpx;
    line-height: 0;
}
.nav-item .ico-filter{
    width: 20rpx;
    height: 20rpx;
    margin-left: 10rpx;
    line-height: 0;
}
.ico-dir{
    width: 16rpx;
    height: 22rpx;
    margin-left: 10rpx;  
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 0;
}
.ico-dir-dn {
    background-position-x: -16rpx;
}
.ico-dir-up {
    background-position-x: -32rpx;
}

/*以下是新增样式*/
.coupon_list{
  margin: 0 auto;
  width: 724rpx;
  height: 254rpx;
  margin-top: 10rpx;
  position: relative;
}
.coupon_list:first-child{
  margin-top: 110rpx;
}

.coupon_list .coupon_bg{
  width: 724rpx;
  height: 254rpx;
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  z-index: 0;
}
.coupon_list .coupon_already{
  position: absolute;
  width: 185rpx;
  height: 163rpx;
  right: 7rpx;
  top: 3rpx;
  z-index: 1;
}
.coupon_list .coupon_mode{
  width: 160rpx;
  height: 160rpx;
  margin-top: 43rpx;
  margin-left: 47rpx;
  /* float: left; */
}
.main_box{
  width: 100%;
  height: 100%;
  z-index: 10;
  position: relative;
}
.coupon_list .right_main{
  width: 437rpx;
  height: 100%;
  float: right;
  padding-right: 45rpx;
  box-sizing: border-box;
}
.coupon_list .right_main .topbox{
  height: 110rpx;
  width: 100%;
  margin-top: 3rpx;
  box-sizing: border-box;
  padding-top: 3rpx;
  line-height: 110rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 24rpx;
  color: #333333;
  font-weight: 500;
}
.coupon_list .right_main .footbox{
  height: 130rpx;
  width: 100%;
}
.coupon_list .right_main .footbox .leftbox{
  width: 230rpx;
  height: 100%;
  float: left;
  color: #ff6a00;
}
.coupon_list .right_main .footbox .price{
  width: 100%;
  height: 60rpx;
  margin-top: 10rpx;
  font-size: 24rpx;
  line-height: 60rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}
.coupon_list .right_main .footbox .price .note{
  font-size: 36rpx;
}
.coupon_list .right_main .footbox .full{
  width: 100%;
  height: 45rpx;
  line-height: 45rpx;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coupon_list .right_main .footbox .btn_1{
  width:140rpx;
  height:48rpx;
  float: right;
  background:linear-gradient(90deg,rgba(255,59,59,1) 0%,rgba(255,115,61,1) 100%);
  border-radius:24rpx;
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
  line-height: 48rpx;
  margin-top: 40rpx; 
}
.coupon_list .right_main .footbox .btn_2{
  width:140rpx;
  height:48rpx;
  float: right;
  background:rgba(153,153,153,1);
  box-shadow:0rpx 6rpx 10rpx 1rpx rgba(102,102,102,0.3);
  border-radius:24rpx;
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
  line-height: 48rpx;
  margin-top: 40rpx; 
}
</style>